<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-30 20:02:30
 * @LastEditTime: 2020-02-28 11:25:38
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <link rel="stylesheet" href="../css/elementui.css">
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <script src="../script/elementui.js"></script>
    <style>
        .temperature-input {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
        }

        /* 温度输入框样式 */
        .temperature-field {
            width: 120px;
            margin: 0 auto;
        }

        .temperature-field .van-field__control {
            font-size: 16px;
            height: 36px;
            text-align: center;
            border-bottom: 2px solid #e6c678;
        }

        /* 温度单位样式 */
        .temperature-unit {
            margin-left: 5px;
            color: #e6c678;
            font-size: 16px;
        }

        .box {
            padding: 0 50px;
            display: flex;
            flex-direction: column;
        }

        .title {
            width: 100%;
            text-align: center;
            font-size: 18px;
            font-weight: 700;
            color: #e6c678;
        }

        .form {
            width: 100%;
            /* flex: 1; */
        }

        .table {
            padding-bottom: 20px;
            flex: 1;
        }

        .table table tr td {
            text-align: center;
        }

        .van-field {
            width: 33.33%;
            float: left;
        }

        .van-cell {
            background-color: transparent;
        }

        .van-field__control {
            border-bottom: 2px solid #e6c678;
        }

        .van-cell::after {
            border-bottom: 0;
        }

        input {
            background: none;
            outline: none;
            border: none;
        }

        .bottomBtns {
            width: 100%;
            display: flex;
        }

        .bottomBtns>div {
            flex: 1;
            width: 100%;
            padding: 10px 20px;
        }

        /* .bottomBtns .van-button {
            margin: auto;
            width: 60%;
        } */

        .el-radio.is-bordered.is-checked {
            border-color: #e6c678;
        }

        .el-radio__input.is-checked .el-radio__inner {
            border-color: #e6c678;
            background: #e6c678;
        }

        .el-radio__input.is-checked+.el-radio__label {
            color: #e6c678;
        }

        .radioBox {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .scanPop {
            width: 160px;
            height: 180px;
            text-align: center;
            background-color: transparent;
            margin: 0;
            padding: 0;
        }

        .van-icon-enlarge {
            font-size: 150px;
            color: #e6c678;
            margin: 0;
            padding: 0;
        }

        .inputClass {
            opacity: 0;
            width: 150px;
        }

        .scanLine {
            position: absolute;
            z-index: 2;
            width: 66%;
            height: 2px;
            transform: translateX(25%);
            background-color: #e6c678;
            animation: scanLineMove 2s infinite;
        }

        .newClass {
            color: red;
        }

        @keyframes scanLineMove {
            from {
                top: 30px;
            }

            to {
                top: 120px;
            }
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box">
            <div class="title">{{title}}</div>
            <div class="form">
                <van-field v-model="formData.date" label="单据日期：" readonly>
                </van-field>
                <van-field v-model="formData.class" label="班次：" required readonly @click="classShow = true"
                    placeholder="请选择班次">
                </van-field>
                <van-field v-model="formData.BillNo" label="单据编号：" readonly></van-field>
                <van-field v-model="formData.EquipmentName" label="设备：" readonly placeholder="请选择设备"
                    @click="equipmentShow = true"></van-field>
                <van-field v-model="formData.EmplName" label="点检人：" readonly placeholder="请选择点检人" @click="handlerScan">
                </van-field>
                <van-field v-model="formData.StatusName" label="设备状态：" required readonly placeholder="请选择设备状态"
                    @click="openBaseScreen('机台状态')">
                </van-field>
            </div>

            <div class="table">
                <table>
                    <tr>
                        <th>操作</th>
                        <th>序号</th>
                        <th>点检保养内容</th>
                        <th>结果</th>
                    </tr>
                    <!-- <tr v-for="(item, index) in tableData">
                        <td>
                            <van-icon size="25" name="delete" color="#ee0a24" @click="deleteTable(index)">
                            </van-icon>
                        </td>
                        <td>{{index + 1}}</td>
                        <td>{{item.CheckTheProjectName}}</td>
                        <td>
                            <div class="radioBox">
                                <el-radio size="mini" v-model="item.Result" label="1" border>合格</el-radio>
                                <el-radio size="mini" v-model="item.Result" label="2" border>不合格</el-radio>
                            </div>
                        </td>
                    </tr> -->
                    <tr v-for="(item, index) in tableData">
                        <td>
                            <van-icon size="25" name="delete" color="#ee0a24" @click="deleteTable(index)"></van-icon>
                        </td>
                        <td>{{index + 1}}</td>
                        <td>{{item.CheckTheProjectName}}</td>
                        <td>
                            <!-- Show temperature input if DJType is 1, otherwise show radio buttons -->
                            <div class="temperature-input" v-if="item.DJType == '1'">
                                <van-field v-model="item.Temperature" placeholder="输入温度" type="number"
                                    class="temperature-field">
                                    <template #extra>
                                        <span class="temperature-unit">℃</span>
                                    </template>
                                </van-field>
                            </div>
                            <div class="radioBox" v-else>
                                <el-radio size="mini" v-model="item.Result" label="1" border>合格</el-radio>
                                <el-radio size="mini" v-model="item.Result" label="2" border>不合格</el-radio>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>

            <div class="bottomBtns">
                <div class="bottomBtns_L">
                    <van-button v-show="!formData.SpotcheckID" color="linear-gradient(#fffeaa, #c07d39)" type="primary"
                        block @click="submit">
                        开始点检
                    </van-button>
                </div>
                <div class="bottomBtns_R">
                    <van-button color="linear-gradient(#fffeaa, #c07d39)" type="primary" block @click="handlerFinish">
                        结束点检
                    </van-button>
                </div>
            </div>
        </div>

        <van-action-sheet v-model="classShow" :actions="classOptions" @select="onSelectClass"></van-action-sheet>
        <van-action-sheet v-model="equipmentShow" :actions="equipmentOptions" @select="onSelectEquipment">
        </van-action-sheet>

        <van-popup v-model="scanShow" class="scanPop">
            <div class="scanLine"></div>
            <van-icon name="enlarge"></van-icon>
            <input id="autoInput" class="inputClass" inputmode="none" type="number" v-model="inputCode" ref="input"
                autofocus @keyup.enter="inputFocus()">
        </van-popup>
    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {

        api.addEventListener({
            name: 'selectRow'
        }, function (ret, err) {
            var type = ret.value.type;
            var row = ret.value.row;
            if (type == '机台') {
                vm.formData.EquipmentID = row.EquipmentID;
                vm.formData.EquipmentName = row.EquipmentName;
            }
            else if (type = '机台状态') {
                vm.formData.StatusName = row.StatusName
                vm.formData.StatusID = row.StatusID
                console.log(JSON.stringify(vm.formData))
            }
        })

        vm = new Vue({
            el: '#app',
            data: {
                equipmentShow: false,
                equipmentOptions: [],
                title: api.pageParam.name,
                CheckType: api.pageParam.CheckType,
                formData: {
                    SpotcheckID: '',
                    date: APP.getFormatDateTime(new Date()),
                    class: api.pageParam.classOption,
                    BillNo: '自动生成',
                    WhiteORNight: api.pageParam.classOption == '白班' ? 1 : 0,
                    EquipmentName: '',
                    EquipmentID: '',
                    EmplName: window.localStorage.getItem('loginName'),
                    EmplID: '',
                    StatusName: '',
                    StatusID: ''
                },
                classShow: false,
                classOptions: [
                    {
                        value: '0',
                        name: '白班'
                    },
                    {
                        value: '1',
                        name: '晚班'
                    }
                ],
                tableData: [
                    {
                        CheckTheProjectName: '',
                        CheckTheProjectID: '',
                        Result: '',
                        Temperature: '', // 新增温度字段
                        DJType: ''
                    }
                ],
                scanShow: false,
                inputCode: '',
            },
            created: function () {
                var that = this;
                if (window.localStorage.getItem('clientHeight') != 752) {
                    document.getElementById('app').style.zoom = 0
                } else {
                    document.getElementById('app').style.zoom = 1.5
                }

                APP.ajax('ZS_EmplName', { Code: window.localStorage.getItem('pin') }, function (res) {
                    console.log('res', JSON.stringify(res))
                    that.formData.EmplID = res.ds[0].EmplID
                })

                console.log('ZSDJGN', JSON.stringify(api.pageParam))
                that.getInitData()
            },
            mounted() {
                APP.keyBoardChange()
            },
            methods: {
        
                openBaseScreen: function (str) {
                    var that = this;
                    var obj;
                    if (str == '机台状态') {
                        obj = {
                            allowClear: false,
                            showSearch: true,
                            searchKey: '',
                            serverSearch: false,
                            searchBy: ['StatusName'],
                            isPaging: false,
                            type: str,
                            cmd: 'getEquipmentStatus',
                            param: {
                            }
                        }
                    }

                    api.openWin({
                        name: 'baseScreen',
                        url: 'common/baseScreen.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: obj
                    })
                },
                handlerScan() {
                    var that = this
                    if (that.title == "过程变更验证" || that.title == "技术员开机点检") {
                        that.scanShow = true
                        setTimeout(() => {
                            that.$refs.input.focus()
                            that.$refs.input.setAttribute('readonly', 'readonly');
                            setTimeout(function () {
                                that.$refs.input.removeAttribute('readonly');
                            }, 500);
                        }, 500)
                    }
                },
                inputFocus() {
                    var that = this
                    // console.log('that.inputCode', JSON.stringify(that.inputCode))
                    APP.ajax('ZS_CardLogin', { P_Card: that.inputCode }, function (res) {
                        // console.log('res', JSON.stringify(res))
                        if (res.ds[0].status == 200) {
                            that.formData.EmplName = res.ds[0].Name

                            APP.ajax('ZS_EmplName', { Code: res.ds[0].pin }, function (res) {
                                console.log('res', JSON.stringify(res))
                                that.formData.EmplID = res.ds[0].EmplID
                            })
                            that.scanShow = false
                        } else {
                            api.toast({
                                msg: res.ds[0].msg
                            })
                        }
                        that.inputCode = ''
                    })
                },
                onSelectEquipment(val) {
                    var that = this
                    that.formData.EquipmentName = val.name
                    that.formData.EquipmentID = val.EquipmentID
                    that.equipmentShow = false

                    
                    APP.ajax('ZS_GetZsStatus2', {
                        TestSite: that.formData.EquipmentID
                    }, function (res) {
                        that.$toast.clear();

                        if (res.ds && res.ds.length > 0) {
                            // If inspection record exists
                            if (res.ds[0].HasInspection) {
                                that.formData.StatusName = "开机";
                                APP.ajax('getZSEquipmentStatusIDByName', {
                                    StatusName: that.formData.StatusName
                                }, function (res3) {
                                    // that.formData.StatusName = "开机";
                                    if (res3.ds && res3.ds.length > 0) {
                                        that.formData.StatusID = res3.ds[0].StatusID
                                    }
                                })


                            } else {
                                that.formData.StatusName = "待单";
                                APP.ajax('getZSEquipmentStatusIDByName', {
                                    StatusName: that.formData.StatusName
                                }, function (res3) {
                                    // that.formData.StatusName = "开机";
                                    if (res3.ds && res3.ds.length > 0) {
                                        that.formData.StatusID = res3.ds[0].StatusID
                                    }
                                })
                            }
                        } else {
                            // Default status if no data returned
                            that.formData.StatusName = "待单";
                            APP.ajax('getZSEquipmentStatusIDByName', {
                                    StatusName: that.formData.StatusName
                                }, function (res3) {
                                    // that.formData.StatusName = "开机";
                                    if (res3.ds && res3.ds.length > 0) {
                                        that.formData.StatusID = res3.ds[0].StatusID
                                    }
                                })
                            // that.$toast('设备状态校验完成');
                        }
                    })
                },
                getHistoryData() {
                    var that = this
                    var obj = {
                        TestSite: api.pageParam.equipment.EquipmentID,
                        CheckType: that.CheckType
                    }
                    console.log('obj', JSON.stringify(obj))
                    APP.ajax('getHistoryDJ', obj, function (res) {
                        console.log('res', JSON.stringify(res))
                        if (res.ds) {
                            that.formData.BillNo = res.ds[0].BillNo
                            that.formData.date = res.ds[0].BillDate.split('T')[0]
                            // that.formData.EmplName = res.ds[0].EmplName
                            that.formData.SpotcheckID = res.ds[0].SpotcheckID
                        }
                    })
                },
                getInitData() {
                    var that = this
                    console.log('CheckType', JSON.stringify(that.CheckType))
                    APP.ajax('getZS_CheckEqu', { CheckType: that.CheckType }, function (res) {
                        console.log('res', JSON.stringify(res))
                        if (res.ds.length) {
                            that.formData.EquipmentName = res.ds[0].EquipmentName
                            that.formData.EquipmentID = res.ds[0].EquipmentID

                            res.ds.map((item) => {
                                item.name = item.EquipmentName
                            })
                            that.equipmentOptions = res.ds
                        } else {
                            that.formData.EquipmentName = api.pageParam.equipment.EquipmentName
                            that.formData.EquipmentID = api.pageParam.equipment.EquipmentID
                        }

                        that.getHistoryData()
                    })

                    APP.ajax('getZS_CheckList', { CheckType: that.CheckType }, function (res) {
                        // console.log(JSON.stringify(res))
                        res.ds.map((item) => {
                            item.Result = '1'
                        })
                        that.tableData = res.ds
                        console.log(JSON.stringify(that.tableData))
                    })
                },
                onSelectClass(val) {
                    var that = this
                    that.formData.WhiteORNight = val.value
                    that.formData.class = val.name
                    that.classShow = false
                    // console.log('val', JSON.stringify(val))
                },
                submit() {
                    var that = this
                    var hasError = false;
                    var errorMsg = '';
                    if (!that.formData.StatusName) {
                        api.toast({ msg: '请选择设备状态！！！' });
                        return;
                    }
                    for (let i = 0; i < that.tableData.length; i++) {
                        const item = that.tableData[i];
                        if (item.DJType == '1') {
                            // 温度项校验
                            if (!item.Temperature || item.Temperature.trim() === '') {
                                hasError = true;
                                errorMsg = `第${i + 1}行【${item.CheckTheProjectName}】温度值不能为空`;
                                break;
                            }

                            if (isNaN(item.Temperature)) {
                                hasError = true;
                                errorMsg = `第${i + 1}行【${item.CheckTheProjectName}】请输入有效的数字`;
                                break;
                            }
                        } else {
                            // 普通项校验
                            if (!item.Result) {
                                hasError = true;
                                errorMsg = `第${i + 1}行【${item.CheckTheProjectName}】请选择结果`;
                                break;
                            }
                        }
                    }

                    if (hasError) {
                        api.toast({ msg: errorMsg });
                        return;
                    }
                    var mainObj = {
                        CheckType: that.CheckType,
                        TestSite: that.formData.EquipmentID,
                        EmployeName: that.formData.EmplName,
                        tester: that.formData.EmplID,
                        StatusID: that.formData.StatusID
                    }
                    console.log('mainObj', JSON.stringify(mainObj))
                    APP.ajax('getZS_AddCheck', mainObj, function (res) {
                        console.log('mainres', JSON.stringify(res))
                        that.formData.SpotcheckID = res.ds[0].Column1
                        if (res.ds.length) {
                            that.tableData.map((item) => {
                                var subObj = {
                                    SpotcheckID: res.ds[0].Column1,
                                    CheckTheProjectID: item.CheckTheProjectID,
                                    // ResultsOfEvaluation: item.Result,
                                    // Temperature:item.Temperature
                                    ResultsOfEvaluation: item.DJType == '1' ? '1' : item.Result,
                                    Temperature: item.DJType == '1' ? item.Temperature : ''
                                }
                                console.log('subObj', JSON.stringify(subObj))
                                APP.ajax('getZS_AddCheckDel', subObj, function (res) {
                                    console.log('subres', JSON.stringify(res))
                                })
                            })
                        }
                    })
                },
                handlerFinish() {
                    var that = this

                    console.log('SpotcheckID', JSON.stringify(that.formData.SpotcheckID))
                    APP.ajax('getZS_UpdateCheck', { SpotcheckID: that.formData.SpotcheckID }, function (res) {
                        console.log('res', JSON.stringify(res))
                        api.toast({
                            msg: res.ds[0].Column1
                        })
                        api.sendEvent({
                            name: 'refreshBrowser',
                            extra: {
                                breadData: {
                                    name: '',
                                    url: 'ZSDJGN',
                                    ZS_FunctionID: 0,
                                    click: true
                                }
                            }
                        })
                        api.closeFrame()
                    })
                }
            }
        })
    };
</script>

</html>